<template>
  <div>
    <div class="content">
      <div class="con" v-for="item in arr" :key="item.id">
        <div>
          <input type="checkbox" v-model="item.checked" @change="changeOne" />
        </div>
        <div>
          <img
            :src="$pre + item.img"
            alt=""
            @click="$router.push('/detail/' + item.goodsid)"
          />
        </div>
        <div>
          <h3>{{ item.goodsname }}</h3>
          <p>规格：不错的商品</p>
          <p><span>比加入降低&yen;100</span></p>
          <p v-if="item.price" class="price">
            &yen;{{ item.price | filterPrice }}
          </p>
        </div>
        <div>
          <button @click="sub(item.id, item.num)">-</button>
          <span>{{ item.num }}</span>
          <button @click="add(item.id)">+</button>
          <button @click="del(item.id)">×</button>
        </div>
      </div>
    </div>

    <div id="bottom">
      <van-submit-bar
        :price="allPrice"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="allChecked" @change="changeAll"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
import { reqShop, reqShopDel, reqShopEdit } from "../../http/http";
export default {
  data() {
    return {
      arr: [],
      // 全选
      allChecked: false,
      n: "1",
    };
  },
  activated() {
    this.isRequest = true;
    this.init();
  },
  methods: {
    init() {
      reqShop({
            uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        }).then((res) => {
        //从后端取回来的list没有数据是null
        let arr = res.data.list ? res.data.list : [];
        //给每一条数据补checked
        arr.forEach((item) => {
          // find 返回满足条的那条数据，如果没有，返回undefined
          //查找原本数组中哪条数据和当前这条数据的id一致，返回哪条数据
          let obj = this.arr.find((i) => i.id == item.id);
          //如果这条数据有，那么checked就是找到的那条数据的checked;如果没有就是false
          item.checked = obj ? obj.checked : false;
        });
        this.arr = arr;
        // 全选赋值
        this.allChecked = this.arr.every((item) => item.checked);
        // 打开开关，用来下一次请求
        this.isRequest = true;
      });
    },
    changeOne() {
      this.allChecked = this.arr.every((item) => item.checked);
    },
    changeAll() {
      this.arr.forEach((item) => {
        item.checked = this.allChecked;
      });
    },
    add(id) {
      reqShopEdit({
        id,
        type: 2,
      }).then((res) => {
        if (res.data.code === 200) {
          //弹成功
          Toast(res.data.msg);
          //列表数据刷新
          this.init();
        }
      });
    },
    sub(id, num) {
      if (num <= 1) {
        Toast("宝贝不能在少了");
        return;
      }
      if (this.isRequest) {
        this.isRequest = false;
        //发起num自减少的请求
        reqShopEdit({ id, type: 1 }).then((res) => {
          //弹成功
          Toast(res.data.msg);
          //列表数据刷新
          this.init();
        });
      }
    },
     // 6.点了删除
    del(id) {
      // 二次确认框
      Dialog.confirm({
        title: "删除提示",
        message: "你确定要删除吗？",
      })
        .then(() => {
          //发起删除的请求
          reqShopDel({
            id,
          }).then((res) => {
            //弹成功
            Toast(res.data.msg);
            //刷列表
            this.init();
          });
        })
        .catch(() => {});
    },
    onSubmit() {
       /* countmoney:总价 countnumber：总数量 idstr:购物车id*/
      let json = {
        countmoney: this.allPrice,
        countnumber: this.arr.reduce(
          (val, item) => (item.checked ? val + item.num : val),0),
        idstr: this.arr.reduce(
          (val, item) => (item.checked ? val + "," + item.id : val),"").slice(1),
      };
      //存起来购物车计算出来的数据
      localStorage.setItem("shopInfo",JSON.stringify(json))
      //跳转订单
      this.$router.push("/order");
    },
  },
  computed: {
    allPrice() {
      return this.arr.reduce(
        (val, item) => (item.checked ? (val + item.price * item.num) * 100 : val),
        0
      );
    },
  },
};
</script>

<style scoped>
.con {
  width: 7rem;
  display: flex;
  justify-content: space-evenly;
  align-self: auto;
  align-items: center;
}
.con img {
  width: 2rem;
  height: 2rem;
}
.con input {
  width: 0.35rem;
  height: 0.35rem;
}
.price {
  color: #ff4400;
}
.van-submit-bar {
  position: fixed;
  bottom: 1rem;
}
.content {
  height: 520px;
  overflow-y: auto;
}
button {
  border: 0;
  margin-left: 0.05rem;
}
</style>